jQuery slideToggle ()
The jQuery slideToggle() method is used to toggle between the slideDown()
and slideUp() animations.
If the element is visible, it will slide up and hide; if it is hidden, it
will slide down and show.
This method is useful for showing and hiding content dynamically with a
smooth animation.
Syntax
$(selector).slideToggle(speed, callback);
- speed (Optional):specifies the speed of the sliding animation.Can be "slow", "fast", or a time in milliseconds (e.g., 400).
- callback (Optional):A function to execute after the animation completes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery slideToggle Example</title>
<style>
#content {
display: none;
background-color: lightcoral;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
</style>
</head>
<body>
<button id="toggleButton">Toggle Content</button>
<div id="content">
<p>This is the content that toggles up and down when
you click the button!</p>
</div>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("#content").slideToggle(500);
});
});
</script>
</body>
</html>
